<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="choseStore-pop flex-row-center w100">
		<view class="choseStore-head w100">
			<text class="title">请选择组队的门店</text>
			<view style="margin-top: 24rpx;" class="choose-box flex-row-center w100">
				<!-- 	<up-search placeholder="日照香炉生紫烟" actionText="搜索" height="72rpx" placeholderColor="#C0CCCF"
					searchIconColor="#C0CCCF" bgColor="rgba(255,255,255,0.2)" :inputStyle="{color: '#C0CCCF'}"
					:actionStyle="{color: '#C0CCCF'}" v-model="keyword"></up-search> -->
				<view class="address-box flex-row-center" @click="chooseLocationTap">
					<up-icon name="map" color="rgba(255,255,255,0.87)" size="36rpx"></up-icon>
					<template>
						<text class="address"
							v-if="addressInfo&&addressInfo.districtInfo">{{addressInfo.districtInfo}}</text>
						<text class="address" v-else>定位失败</text>
					</template>
					<up-icon name="arrow-right" color="rgba(255,255,255,0.87)" size="24rpx"></up-icon>
				</view>
				<view class="distance-box flex-row-center" style="width: 120rpx;" @click="()=>distanceShow=true">
					<text class="distance-text">{{distance.label}}</text>
					<up-icon name="arrow-right" color="rgba(255,255,255,0.87)" size="24rpx"></up-icon>
				</view>
			</view>
		</view>
		<view class="choseStore-content w100">
			<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="getMoreStore">
				<template v-if="storeInfo.list.length>0">
					<view class="flex-row-center store-content w100" @click="chooseStore(item,index)"
						v-for="(item,index) in storeInfo.list" :key="index">
						<view :class="[chooseStoreInfo.id==item.id?'radio-box-active':'radio-box','flex-center']">
							<up-icon v-if="chooseStoreInfo.id==item.id" name="checkbox-mark" color="#0A534F"
								size="28rpx"></up-icon>
						</view>
						<!-- 门店信息 -->
						<view class="store-box flex">
							<image :src="item.background_image" class="store-img" mode="aspectFill"></image>
							<view class="store-info">
								<text class="store-name">{{item.store_name}}</text>
								<view class="position-box flex w100">
									<text class="position">{{item.address}}</text>
								</view>
								<view class="distance flex-row-center">
									<up-icon name="map-fill" color="#ccc" size="28rpx"></up-icon>
									<text class="text">{{item.juli}}km</text>
								</view>
							</view>
						</view>
					</view>
					<view class="view-more" @click='getMoreStore'>
						<up-loadmore :status="storeInfo.status" />
					</view>
				</template>
				<template v-else>
					<view class="not-list-view flex-row-center">
						<text class="text">附近没有查询到相关门店~</text>
						<text class="btn" @click="chooseLocationTap">试试切换位置</text>
					</view>
				</template>
			</scroll-view>
		</view>
		<view class="choseStore-footer w100 flex-center">
			<up-button text="确定" @click="submitStore" loadingText="提交中" :disabled="!chooseStoreInfo.id"
				:customStyle="{'color':'#115B56',height:'72rpx'}"
				color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)" shape="circle"></up-button>
		</view>
	</view>
	<up-picker :show="distanceShow" @cancel="()=>distanceShow=false" @confirm="distanceConfim" keyName="label"
		:columns="distanceList"></up-picker>
</template>

<script setup>
	import {
		watch
	} from 'vue';
	import {
		userInfoStore
	} from '../../stores/user';
	import {
		chooseLocation
	} from '@/utils/chooseLocation';
	const distanceList = [
		[{
				label: '10km',
				num: 10
			},
			{
				label: '20km',
				num: 20
			}, {
				label: '30km',
				num: 30
			}, {
				label: '40km',
				num: 40
			}, {
				label: '50km',
				num: 50
			},
		]
	]
	const props = defineProps({
		storeShow: {
			default: false
		},
		storeId: {
			default: 0
		}
	})
	const userStore = userInfoStore();
	const addressInfo = ref(userStore.addressInfo);
	const emit = defineEmits(['confirm']);
	const keyword = ref('');
	const distance = ref({
		label: '20km',
		num: 20
	});
	const distanceShow = ref(false);
	const chooseStoreInfo = ref({
		id: props.storeId,
		name: ''
	});
	watch(() => props.storeShow, (newVal, oldVal) => {
		if (newVal) { //打开弹窗
			if (addressInfo.value) {
				uni.showLoading({
					title: '加载中'
				})
				getStoreList();
			}
		} else { //关闭弹窗
			storeInfo.list = [];
			storeInfo.status = 'loadmore';
			storeInfo.pageSize = 1;
			chooseStoreInfo.value.id = 0;
		}
	})
	watch(() => props.storeId, (newVal, oldVal) => {
		chooseStoreInfo.value.id = props.storeId;
	})
	const storeInfo = reactive({
		list: [],
		status: 'loadmore',
		pageSize: 1
	})
	const chooseLocationTap = async () => { //选择地理位置
		const res = await chooseLocation(addressInfo.value?.latitude, addressInfo.value?.longitude);
		if (res.districtInfo) {
			console.log('chooseLocationTap', res);
			addressInfo.value = res;
			storeInfo.list = [];
			storeInfo.status = 'loadmore';
			storeInfo.pageSize = 1;
			uni.showLoading({
				title: '加载中'
			})
			getStoreList();
		}
	}
	const getMoreStore = () => {
		if (storeInfo.status == 'loading' || storeInfo.status == 'nomore') return;
		storeInfo.status = 'loading';
		setTimeout(() => {
			getStoreList();
		}, 600)
	}
	const getStoreList = async () => { //获取店铺
		const res = await $Api.store.getStoreList({
			lat: addressInfo.value?.latitude,
			lng: addressInfo.value?.longitude,
			radius: distance.value.num, //半径（公里）
			page: storeInfo.pageSize
		})
		uni.hideLoading();
		if (res.code == 1) {
			if (res.data.list && res.data.list.length > 0) {
				res.data.list.map(val => {
					if (val.juli) {
						val.juli = parseFloat(val.juli).toFixed(2)
					}
				})
				storeInfo.list = [...storeInfo.list, ...res.data.list];
			}
			if (res.data.totalPage && res.data.totalPage > storeInfo.pageSize) {
				storeInfo.status = 'loadmore';
				storeInfo.pageSize++;
			} else {
				storeInfo.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg);
		}
	}
	const changeRadius = (e) => {
		console.log('changeRadius', e);
	}
	const chooseStore = (item, index) => {
		chooseStoreInfo.value = item;
	};
	const distanceConfim = (e) => {
		distance.value.label = e.value[0].label;
		distance.value.num = e.value[0].num;
		storeInfo.list = [];
		storeInfo.status = 'loadmore';
		storeInfo.pageSize = 1;
		uni.showLoading({
			title: '加载中'
		});
		getStoreList();
		distanceShow.value = false;
	}
	const submitStore = (id) => {
		emit('confirm', {
			id: chooseStoreInfo.value.id,
			store_name: chooseStoreInfo.value.store_name
		});
	}
</script>
<style lang="scss">
	.u-search__content__input {
		background: transparent !important;
	}
</style>
<style lang="scss" scoped>
	.choose-box {
		justify-content: space-between;
		padding: 0 24rpx;
	}

	.choseStore-pop {
		width: 750rpx;
		box-sizing: border-box;
		padding: 36rpx;
		height: 80vh;
		flex-direction: column;
		background-color: #222528;
		border-radius: 18rpx 18rpx 0 0;

		.title {
			font-weight: bold;
			font-size: 34rpx;
			color: rgba(255, 255, 255, 0.87);
			line-height: 40rpx;
		}

		.choseStore-content {
			flex: 1;
			margin: 24rpx 0;
			overflow: hidden;

			.scroll-Y {
				height: 100%;
			}

			.store-content {
				padding: 24rpx 0;
				border-bottom: 1rpx solid #373B3E;
			}

			.radio-box {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				border: 1rpx solid #ccc;
				margin-right: 18rpx;
				box-sizing: border-box;
				flex-shrink: 0;
			}

			.radio-box-active {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				background-color: #7EDE9E;
				margin-right: 18rpx;
				flex-shrink: 0;
			}
		}

		.choseStore-footer {
			height: 72rpx;
		}
	}

	.store-box {
		flex: 1;
		width: 0;

		.store-img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 12rpx;
			flex-shrink: 0;
			margin-right: 18rpx;
		}

		.store-info {
			flex: 1;

			.store-name {
				font-weight: 800;
				font-size: 34rpx;
				color: #DDDDDE;
				line-height: 64rpx;
				width: 100%;
				text-overflow: ellipsis;
				white-space: nowrap;
				lines: 1;
				overflow: hidden;
			}

			.position-box {
				align-items: flex-start;

				.position {
					font-size: 28rpx;
					color: #DBDDDE;
					margin-left: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					word-break: break-all;
					-webkit-box-orient: vertical;
				}
			}

			.distance {
				margin-top: 12rpx;

				.text {
					font-weight: 500;
					font-size: 24rpx;
					color: rgba(255, 255, 255, 0.3);
					margin-left: 8rpx;
				}
			}
		}
	}

	.distance-box {
		.distance-text {
			font-weight: 500;
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.87);
			margin: 0 6rpx;
		}
	}

	.address-box {
		.address {
			max-width: 178rpx;
			height: 36rpx;
			font-weight: 500;
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.87);
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			margin: 0 6rpx;
		}
	}

	.not-list-view .btn {
		color: #9BDEB5;
	}
</style>